<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="blog/layout" th:with=" title=${article.title} + ' |',active='detail'">
<header th:replace="blog/layout::headerFragment(${title},${active})"></header>
<body>
<div layout:fragment="content">
    <div class="content-wrap">
        <div id="content" class="content">
            <div id="posts" class="posts-expand">
                <article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
                    <div class="post-block" style="opacity: 1; display: block;">
                        <header class="post-header" style="opacity: 1; display: block; transform: translateY(0px);">
                            <h1 class="post-title" itemprop="name headline" th:text="${article.title}"></h1>
                            <div class="post-meta">
                                <span class="post-time">
                                    <span class="post-meta-item-icon">
                                    <i class="fa fa-calendar-o"></i>
                                    </span>
                                    <span class="post-meta-item-text">发表于</span>
                                    <time th:text="${commons.fmtdate(article.created, 'yyyy-MM-dd')}" title="创建于" datetime="2018-07-07T15:40:56+08:00">
                                    </time>
                                </span>
                                <span class="post-category">
                                    <span class="post-meta-divider">|</span>
                                    <span class="post-meta-item-icon">
                                        <i class="fa fa-folder-o"></i>
                                    </span>
                                    <span class="post-meta-item-text">分类于</span>
                                    <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                                        <a th:href="@{'/categories/'} + ${article.categories}" itemprop="url" rel="index">
                                            <span itemprop="name" th:text="${article.categories}"></span>
                                        </a>
                                    </span>
                                </span>
                            </div>
                        </header>
                        <div class="post-body" itemprop="articleBody" style="opacity: 1; display: block; transform: translateY(0px);">
                            <th:block th:utext="${commons.article(article.content)}"></th:block>
                        </div>
                    </div>
                </article>
                <div class="post-spread">
                </div>
            </div>
        </div>
        <div class="comments" id="comments" style="opacity: 1; display: block;">
            <div id="comments-content" class="segment">
                <h3 class="dividing">评论</h3>
                <th:block th:if="${comments}">
                    <div th:each="comment : ${comments}" class="comment">
                        <a class="avatar">
                            <img th:src="@{/blog/image/avatar.png}">
                        </a>
                        <div class="content">
                            <a th:href="${comment.url}" target="_blank" class="author">
                                <span th:text="${comment.author}"></span>
                            </a>
                            <div class="metadata">
                                <span class="date" th:text="${commons.fmtdate(comment.created, 'yyyy-MM-dd HH:mm')}"></span>
                            </div>
                            <div class="text" th:text="${comment.content}"></div>
                        </div>
                    </div>
                </th:block>
            </div>
            <div class="comment-form">
                <input type="hidden" name="coid" id="coid">
                <input type="hidden" name="cid" id="cid" th:value="${article.cid}">
                <input type="hidden" name="_csrf_token" id="csrf_token" th:value="${_csrf_token}">
                <div class="field">
                    <textarea id="comment-content" required="required" class="form-control" name="content" placeholder="请输入评论信息..." cols="30" rows="7"></textarea>
                </div>
                <div class="fields">
                    <div class="field">
                        <input id="nickname" required="required" type="text" name="nickname" placeholder="姓名">
                    </div>
                    <div class="field">
                        <input id="email" required="required" type="email" name="email" placeholder="邮箱">
                    </div>
                    <div class="field">
                        <input id="url" type="url" name="url" placeholder="网址">
                    </div>
                </div>
                <div class="comment-button">
                    <button onclick="commentClick()">发布</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>